import React, { Component } from 'react'
import CommentInput from './ CommentInput.jsx'
import CommentList from './ CommentList.jsx'
import '../../css/comment.css'
import storage from '../model/Storage.js'

class CommentApp extends Component {
    constructor () {
        super()
        this.state = {
          comments: []
        }
      }
      componentWillMount(){
        //var list = JSON.parse(localStorage.getItem('key'));
        var comments = storage.get('comment');
        if (comments) {
          this.state.comments = comments
        }
        //console.log(this.list)
      }
    handleSubmitComment (comment) {
        if (!comment) return
        if (!comment.username) return alert('请输入用户名')
        if (!comment.content) return alert('请输入评论内容')
        console.log(comment)
        this.state.comments.push(comment)
        this.setState({
            comments: this.state.comments
          })
        
          storage.set('comment',this.state.comments)
      }

      handleDeleteComment (index) {
        console.log(index)
        const comments = this.state.comments
        comments.splice(index, 1)
        this.setState({ comments })
        storage.set('comment',this.state.comments)
      }
      
  render() {
    return (
      <div className='wrapper'>
        <CommentInput onSubmit={this.handleSubmitComment.bind(this)}/>
        <CommentList comments={this.state.comments} onDeleteComment={this.handleDeleteComment.bind(this)} />
      </div>
    )
  }
}

export default CommentApp